"use client";

import { use } from "react";
import Link from "next/link";
import { useApi } from "@/lib/api";
import { fmtDate } from "@/lib/format";
import { Bar, Empty, Metric, Panel, Skeleton, Table, Tag } from "@/components/ui";

interface Detail {
  platform: string;
  summary: { confidence: number; page_types: number; entity_types: number; navigation_actions: number; network_schemas: number; media_patterns: number; sessions: number } | null;
  model: {
    updated_at: string;
    response_patterns: Record<string, { shape_hash: string; hostname: string; path_pattern: string; method: string; graphql_operation?: string; likely_entity_types: Record<string, number>; observed_count: number; entity_yield_total: number; confidence: number; triggered_by: Record<string, number>; first_seen: string; last_seen: string }>;
    action_patterns: Record<string, { action_type: string; from_page_type: string; observed_count: number; avg_new_entities: number; avg_network_responses: number; to_page_types: Record<string, number>; failures: number }>;
    page_types: Record<string, { page_type: string; observed_count: number; url_patterns: Record<string, number>; avg_entities: number; entity_types: Record<string, number>; avg_confidence: number }>;
    media_patterns: Record<string, { hostname: string; kind: string; observed_count: number }>;
    sessions_learned: string[];
  } | null;
  manifest: { compiled_at: string; confidence: number; network_patterns: unknown[] } | null;
  profiles: { alias: string; has_state: boolean }[];
}

export default function PlatformPage({ params }: { params: Promise<{ platform: string }> }) {
  const { platform } = use(params);
  const { data, loading } = useApi<Detail>(`/platforms/${platform}`, { refreshMs: 15_000 });
  if (loading) return <Skeleton rows={10} />;
  if (!data) return <Empty>unknown platform</Empty>;
  const m = data.model;
  const rps = m ? Object.values(m.response_patterns).filter((r) => Object.keys(r.likely_entity_types).length).sort((a, b) => b.confidence - a.confidence) : [];
  const aps = m ? Object.values(m.action_patterns).filter((a) => a.from_page_type !== "ANY").sort((a, b) => b.observed_count - a.observed_count) : [];
  const pts = m ? Object.values(m.page_types).sort((a, b) => b.observed_count - a.observed_count) : [];
  return (
    <div className="space-y-4">
      <div className="text-xs text-dim mono">
        <Link href="/platforms" className="hover:text-cyan">connectors</Link> / {platform}
      </div>
      <div className="flex flex-wrap items-end gap-4">
        <h1 className="text-2xl font-semibold tracking-tight capitalize">{platform}</h1>
        {data.summary && (
          <div className="ml-auto flex items-center gap-3 w-72">
            <span className="text-xs text-dim">confidence</span>
            <Bar value={data.summary.confidence / 100} className="flex-1" color={data.summary.confidence >= 70 ? "#43e69a" : "#38e1ff"} />
            <span className="mono">{data.summary.confidence}%</span>
          </div>
        )}
      </div>
      {!m ? (
        <Panel>
          <Empty>
            Nothing learned yet on {platform}. {["youtube", "reddit"].includes(platform) ? "Launch a learning mission from the Missions page." : "No adapter yet — this platform is scheduled for a later phase."}
          </Empty>
        </Panel>
      ) : (
        <>
          <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
            <Panel title="Learned model">
              <Metric label="page types" value={data.summary?.page_types} />
              <Metric label="entity types" value={data.summary?.entity_types} />
              <Metric label="navigation actions" value={data.summary?.navigation_actions} />
              <Metric label="network schemas" value={data.summary?.network_schemas} />
              <Metric label="media patterns" value={data.summary?.media_patterns} />
              <Metric label="sessions learned from" value={m.sessions_learned.length} />
              <Metric label="updated" value={fmtDate(m.updated_at)} />
              <Metric label="compiled manifest" value={data.manifest ? `${fmtDate(data.manifest.compiled_at)} · ${data.manifest.network_patterns.length} patterns` : "not yet (needs ≥ 40 %)"} />
              <Metric label="browser profiles" value={data.profiles.length ? data.profiles.map((p) => `${p.alias}${p.has_state ? " ✓" : ""}`).join(", ") : "none — run pnpm login"} />
            </Panel>
            <Panel title="Page types" sub="what the crawler recognises, and what each page usually yields" className="xl:col-span-2" pad={false}>
              <div className="p-4">
                <Table head={["page type", "seen", "avg entities", "avg conf", "url patterns", "entity mix"]} dense>
                  {pts.map((p) => (
                    <tr key={p.page_type}>
                      <td>
                        <Tag color="#38e1ff">{p.page_type}</Tag>
                      </td>
                      <td className="mono">{p.observed_count}</td>
                      <td className="mono">{p.avg_entities.toFixed(1)}</td>
                      <td className="mono">{p.avg_confidence.toFixed(2)}</td>
                      <td className="mono text-[11px] text-fg-2">
                        {Object.entries(p.url_patterns)
                          .sort((a, b) => b[1] - a[1])
                          .slice(0, 3)
                          .map(([k, v]) => `${k} (${v})`)
                          .join("  ")}
                      </td>
                      <td className="text-[11px]">
                        {Object.entries(p.entity_types)
                          .sort((a, b) => b[1] - a[1])
                          .slice(0, 4)
                          .map(([k, v]) => (
                            <Tag key={k} className="mr-1">
                              {k} {v}
                            </Tag>
                          ))}
                      </td>
                    </tr>
                  ))}
                </Table>
              </div>
            </Panel>
          </div>
          <Panel title="Runtime API map" sub="action → response shape → entity types (§71) — the learned frontend API of the platform" pad={false}>
            <div className="p-4">
              {rps.length ? (
                <Table head={["endpoint", "entity types", "triggered by", "seen", "yield", "confidence"]} dense>
                  {rps.map((r) => (
                    <tr key={r.shape_hash}>
                      <td className="mono text-[11.5px]">
                        <Tag color="#9d7bff" className="mr-1">
                          {r.method}
                        </Tag>
                        {r.hostname}
                        <span className="text-fg-2">{r.path_pattern}</span>
                        {r.graphql_operation && <Tag color="#ff7ad9" className="ml-1">{r.graphql_operation}</Tag>}
                        <div className="text-[10px] text-dim">#{r.shape_hash.slice(0, 10)}</div>
                      </td>
                      <td>
                        {Object.entries(r.likely_entity_types).map(([t, n]) => (
                          <Tag key={t} color="#38e1ff" className="mr-1">
                            {t} {n}
                          </Tag>
                        ))}
                      </td>
                      <td>
                        {Object.entries(r.triggered_by).map(([a, n]) => (
                          <Tag key={a} color="#ffb347" className="mr-1">
                            {a.toLowerCase()} {n}
                          </Tag>
                        ))}
                      </td>
                      <td className="mono">{r.observed_count}</td>
                      <td className="mono">{(r.entity_yield_total / Math.max(1, r.observed_count)).toFixed(1)} ent/resp</td>
                      <td className="w-32">
                        <Bar value={r.confidence} color={r.confidence >= 0.5 ? "#43e69a" : "#ffb347"} />
                        <div className="mono text-[10px] text-dim">{r.confidence.toFixed(2)}</div>
                      </td>
                    </tr>
                  ))}
                </Table>
              ) : (
                <Empty>no entity-bearing schema learned yet</Empty>
              )}
            </div>
          </Panel>
          <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
            <Panel title="Navigation patterns" sub="action from a page type → where it leads and what it yields (§30)" pad={false}>
              <div className="p-4">
                <Table head={["action", "from", "→ to", "seen", "avg new ent", "avg resp", "fail"]} dense>
                  {aps.map((a) => (
                    <tr key={a.action_type + a.from_page_type}>
                      <td>
                        <Tag color="#ffb347">{a.action_type.toLowerCase()}</Tag>
                      </td>
                      <td>
                        <Tag color="#38e1ff">{a.from_page_type}</Tag>
                      </td>
                      <td className="text-[11px]">
                        {Object.entries(a.to_page_types)
                          .sort((x, y) => y[1] - x[1])
                          .map(([k, v]) => `${k} ${v}`)
                          .join(", ")}
                      </td>
                      <td className="mono">{a.observed_count}</td>
                      <td className="mono">{a.avg_new_entities.toFixed(1)}</td>
                      <td className="mono">{a.avg_network_responses.toFixed(1)}</td>
                      <td className="mono">{a.failures}</td>
                    </tr>
                  ))}
                </Table>
              </div>
            </Panel>
            <Panel title="Media delivery patterns" pad={false}>
              <div className="p-4">
                {Object.values(m.media_patterns).length ? (
                  <Table head={["host", "kind", "seen"]} dense>
                    {Object.values(m.media_patterns)
                      .sort((a, b) => b.observed_count - a.observed_count)
                      .map((mp) => (
                        <tr key={mp.hostname + mp.kind}>
                          <td className="mono text-[11.5px]">{mp.hostname}</td>
                          <td>
                            <Tag color="#ff7ad9">{mp.kind}</Tag>
                          </td>
                          <td className="mono">{mp.observed_count}</td>
                        </tr>
                      ))}
                  </Table>
                ) : (
                  <Empty>none yet</Empty>
                )}
              </div>
            </Panel>
          </div>
        </>
      )}
    </div>
  );
}